<template>
	<div class="AlarmRecord">
		<el-card shadow="never">
		    <el-row>
				<el-col :span="6">
					<span class="label">
						起始时间： 
					</span>	
					 <el-date-picker
					      v-model="startTime"
					      type="datetime"
						  class="select"
						  value-format="yyyy-MM-dd HH:mm:ss"
					      placeholder="选择起始时间">
					    </el-date-picker>
				</el-col>
			    <el-col :span="6">
			    	<span class="label">
			    		终止时间：
			    	</span>	
			    	 <el-date-picker
			    	      v-model="endTime"
			    	      type="datetime"
			    		  class="select"
						  value-format="yyyy-MM-dd HH:mm:ss"
			    	      placeholder="选择终止时间">
			    	    </el-date-picker>
			    </el-col>
			    
		        <el-col :span="12" >
					
					<el-button type="primary" size="small" style="margin-left:5px;float:right;" @click="reset()">重置</el-button>
					
					<el-button type="primary" size="small" style="float:right;" @click="search()">查询</el-button>
			   </el-col>
		    </el-row>
			
		</el-card>	
		<br/>
		
		<el-button type="primary"  style="margin-left:5px;" @click="interrupt()">数据源中断检测</el-button>

		<br/><br/>

		  <el-table
		    :data="monitorList"
			border
		    style="width: 100%">
			
		   <el-table-column
		     prop="id"
		     label="序号"
			 
		      align="center"
		     >
		   </el-table-column>
		   <el-table-column
		     prop="first_create_time"
		     label="最近异常时间"
		     align="center"
		     >
		   </el-table-column>
		   <el-table-column
		     prop="tag_name"
		     label="标签名"
		     align="center"
		     >
		   </el-table-column>
		   <el-table-column
		     prop="descriptor"
		     label="标签描述"
		     align="center"
		     >
		   </el-table-column>
		   <el-table-column
		     prop="record_amount"
		     label="异常数据条数"
		     align="center"
		     >
		   </el-table-column>
		   <el-table-column
		   
		     label="状态"
		     align="center"
		     >
			 <template slot-scope="scope">
			 				  <span >{{getStatus(scope.row)}}</span>
			 
			 </template>
		   </el-table-column>
		   <el-table-column
		   	label="操作"
		   	align="center"
		   	>
		   	<template slot-scope="scope">
		   		<el-button type="text" icon="el-icon-view"   @click="getDetails(scope.row.first_create_time,scope.row.tag_name)" >查看详情</el-button>
		   	</template>
		   </el-table-column>
		   
		  </el-table>
		  <center>
		           <el-pagination
		             style="margin-top: 10px;"
		             background
		             :page-size="pageSize"
		             @current-change="handleCurrentChange"
		             layout="total, prev, pager, next, jumper"
		             :current-page="currentPage"
		             :total="total">
		           </el-pagination>
		  </center>
		  <el-dialog title="异常详情" :visible.sync="dialogVisible" width="70%" >
		  	<center>
		  	<div style="width: 90%;">
		       <el-table
		           :data="this.detailsList"
		           border
		           style="width: 100%">
		           <el-table-column
		             prop="id"
		             label="id"
		       	  width="80"
		       	   align="center"
		             >
		           </el-table-column>
		           <el-table-column
		             prop="tag_name"
		             label="标签"
		       	 
		       	  align="center"
		             >
		           </el-table-column>
		           <el-table-column
		             prop="descriptor"
		             label="描述"
		       	  align="center"
		       	  >
		           </el-table-column>
		       	<el-table-column
		       	  label="告警级别"
		       	  align="center"
		       	  >
		       	  <template slot-scope="scope">
		       	  				  <span >{{getAlarmClass(scope.row)}}</span>
		       	  
		       	  </template>
		       	</el-table-column>
		       	<el-table-column
		       	  prop="data"
		       	  label="数值"
		       	  align="center"
		       	  >
		       	</el-table-column>
		       	<el-table-column
		       	  prop="create_time"
		       	  label="告警时间"
				   width="220"
		       	  align="center"
		       	  >
		       	</el-table-column>
		       	<el-table-column
		       	 
		       	  label="告警类型"
		       	  align="center"
		       	  >
				  <template slot-scope="scope">
				  				  <span >{{getType(scope.row)}}</span>
				  
				  </template>
		       	</el-table-column>
		       	<el-table-column
		       	  prop="threshold"
		       	  label="告警阈值"
		       	  align="center"
		       	  >
		       	</el-table-column>
		       	
		         </el-table>
			   
		  	 </div>
		  	 </center>
			 <center>
			          <el-pagination
			            style="margin-top: 10px;"
			            background
			            :page-size="pageSizeIn"
			            @current-change="handleCurrentChangeIn"
			            layout="total, prev, pager, next, jumper"
			            :current-page="currentPageIn"
			            :total="totalIn">
			          </el-pagination>
			 </center>
				<span slot="footer" class="dialog-footer">
			  	 
			  	 </span>
		  </el-dialog>
		  
		  <!--  中断数据-->
		  <el-dialog title="当前数据源中断监测点" :visible.sync="dialogVisibleInterrupt" width="70%" >
		  	<center>
		  	<el-table
		  	    :data="this.interruptList"
		  	    border
		  	    style="width: 100%">
		  	    <el-table-column
		  	      prop="tag_name"
		  	      label="数据中断源"
		  		 
		  		  align="center"
		  	      >
		  	    </el-table-column>
				<el-table-column
				  prop="first_create_time"
				  label="最近检测时间"
				  align="center"
				  >
				</el-table-column>
				<el-table-column
				  prop="descriptor"
				  label="描述"
				  align="center"
				  >
				</el-table-column>

		  		<el-table-column
		  		  prop="record_amount"
		  		  label="中断数据条数"
		  		  align="center"
		  		  >
		  		</el-table-column>
		  		
		  	  </el-table>
		  	 </center>
			 <center>
			          <el-pagination
			            style="margin-top: 10px;"
			            background
			            :page-size="pageSizeInterrupt"
			            @current-change="handleCurrentChangeInterrupt"
			            layout="total, prev, pager, next, jumper"
			            :current-page="currentPageInterrupt"
			            :total="totalInterrupt">
			          </el-pagination>
			 </center>

		  	<span slot="footer" class="dialog-footer">
		  			  	 
		  	</span>
		  </el-dialog>
		  
		

		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				  //展开前表格
				  monitorList:[],
				  detailsList:[],
				  total: 0,
				  currentPage: 1,
				  pageSize:5,
				  totalIn: 0,
				  currentPageIn:1,
				  pageSizeIn:5,
				   refresh:true,
				   //搜索框
				   startTime:null,
				   endTime:null,
				   startTimeOld:null,
				   endTimeOld:null,
				   activeNames: ['0'],
				   dialogVisible: false,//详情弹窗
				   dialogVisibleInterrupt: false,//详情弹窗
				   timeIn:'',
				   tagNameIn:'',
				   //中断 分页
				   interruptList:[],
				   totalInterrupt: 0,
				   currentPageInterrupt: 1,
				   pageSizeInterrupt:5,
				   
			}
		},
		created() {
			this.axios.post('/dataOp/getAllAbnormalMonitorByPage',{
				pageNum:this.currentPage,
				pageSize:this.pageSize
				}).then(r=>{
				this.monitorList=r.data.data.list;
				this.total=r.data.data.total;
			});
		},
		
		mounted() { 

		 }, 
		methods: {

			reset(){
				this.startTime=null;
				this.endTime=null;
				
			},
			//主表，分页
			handleCurrentChange (val) {
			      this.currentPage = val
				  //console.log(this.currentPage)
			      if(this.startTimeOld!=null&&this.endTimeOld!=null){
			      this.axios.post('/dataOp/getAbnormalMonitorByFilterByPage',{
			      	        filterMap:{
			      			  	starttime:this.startTimeOld,
			      				endtime:this.endTimeOld,
								},
								pageNum:this.currentPage,
								pageSize:this.pageSize
			      	}).then(r=>{
			      	if(r.data.code=='200'){
			      				this.monitorList=r.data.data.list;
			      				this.total=r.data.data.total;
			      				}
			      				else if(r.data.code=='504'){
			      					 this.monitorList=[];
			      					 this.total=0;
			      					 this.currentPage=1;
			      				}
					
			      });
			      }
			      else if(this.startTimeOld ==null&&this.endTimeOld!=null){
			      	
			      this.axios.post('/dataOp/getAbnormalMonitorByFilterByPage',{
					  filterMap:{
			      				endtime:this.endTimeOld,
								},
								pageNum:this.currentPage,
								pageSize:this.pageSize
			      	}).then(r=>{
			      	if(r.data.code=='200'){
			      				this.monitorList=r.data.data.list;
			      				this.total=r.data.data.total;
			      				}
			      				else if(r.data.code=='504'){
			      					 this.monitorList=[];
			      					 this.total=0;
			      					 this.currentPage=1;
			      				}
					
			      });
			      }
			      else if(this.startTimeOld !=null&&this.endTimeOld==null){
			      
			      this.axios.post('/dataOp/getAbnormalMonitorByFilterByPage',{
					  filterMap:{
			      				starttime:this.startTimeOld,
								},
								pageNum:this.currentPage,
								pageSize:this.pageSize
			      	}).then(r=>{
			      	if(r.data.code=='200'){
			      				this.monitorList=r.data.data.list;
			      				this.total=r.data.data.total;
			      				}
			      				else if(r.data.code=='504'){
			      					 this.monitorList=[];
			      					 this.total=0;
			      					 this.currentPage=1;
			      				}
					
			      });
			      }
			      else if(this.startTimeOld==null&&this.endTimeOld==null){
			      this.axios.post('/dataOp/getAbnormalMonitorByFilterByPage',{
					  filterMap:{
						  
					  },
					  pageNum:this.currentPage,
					  pageSize:this.pageSize
			      	}).then(r=>{
			      	if(r.data.code=='200'){
			      				this.monitorList=r.data.data.list;
			      				this.total=r.data.data.total;
			      				}
			      				else if(r.data.code=='504'){
			      					 this.monitorList=[];
			      					 this.total=0;
			      					 this.currentPage=1;
			      				}
					
			      });
			      }
			    },
			//根据起始时间终止时间查找
			search(){
				  this.currentPage=1
				  
			      if(this.startTime>this.endTime){
					  this.$alert('终止时间应在起始时间之后，请重新选择时间！', '查询失败', {
					  	confirmButtonText: '确定',
					  	 callback: action => {
					  									          }
					  									});
				  }
				  else{
					  this.startTimeOld=this.startTime;
					  this.endTimeOld=this.endTime;
			      if(this.startTime!=null&&this.endTime!=null){
			      this.axios.post('/dataOp/getAbnormalMonitorByFilterByPage',{
			      	        filterMap:{
			      			  	starttime:this.startTime,
			      				endtime:this.endTime,
			      								},
			      								pageNum:this.currentPage,
			      								pageSize:this.pageSize
			      	}).then(r=>{
			      	if(r.data.code=='200'){
			      				this.monitorList=r.data.data.list;
			      				this.total=r.data.data.total;
			      				}
			      				else if(r.data.code=='504'){
			      					 this.monitorList=[];
			      					 this.total=0;
			      					 this.currentPage=1;
			      				}
			      					
			      });
			      }
			      else if(this.startTime ==null&&this.endTime!=null){
			      	
			      this.axios.post('/dataOp/getAbnormalMonitorByFilterByPage',{
			      					  filterMap:{
			      				endtime:this.endTime,
			      								},
			      								pageNum:this.currentPage,
			      								pageSize:this.pageSize
			      	}).then(r=>{
			      	if(r.data.code=='200'){
			      				this.monitorList=r.data.data.list;
			      				this.total=r.data.data.total;
			      				}
			      				else if(r.data.code=='504'){
			      					 this.monitorList=[];
			      					 this.total=0;
			      					 this.currentPage=1;
			      				}
			      					
			      });
			      }
			      else if(this.startTime !=null&&this.endTime==null){
			      
			      this.axios.post('/dataOp/getAbnormalMonitorByFilterByPage',{
			      					  filterMap:{
			      				starttime:this.startTime,
			      								},
			      								pageNum:this.currentPage,
			      								pageSize:this.pageSize
			      	}).then(r=>{
			      	if(r.data.code=='200'){
			      				this.monitorList=r.data.data.list;
			      				this.total=r.data.data.total;
			      				}
			      				else if(r.data.code=='504'){
			      					 this.monitorList=[];
			      					 this.total=0;
			      					 this.currentPage=1;
			      				}
			      					
			      });
			      }
			      else if(this.startTime==null&&this.endTime==null){
			      	//console.log('aaa')
			      this.axios.post('/dataOp/getAbnormalMonitorByFilterByPage',{
			      					  filterMap:{
			      						  
			      					  },
			      					  pageNum:this.currentPage,
			      					  pageSize:this.pageSize
			      	}).then(r=>{
						if(r.data.code=='200'){
									this.monitorList=r.data.data.list;
			      					this.total=r.data.data.total;
									}
									else if(r.data.code=='504'){
										 this.monitorList=[];
										 this.total=0;
										 this.currentPage=1;
									}
			      					
			      });
			      }
				  }
			},
			
			//处理初始表格中告警等级，转换成文字
			getStatus(item){
						   if(item.status==0){
								return('异常');
								}
							else if(item.status==1)
								return('正常');
						   
			},
			//获取弹窗列表
			getDetails(time,tagName){
				this.timeIn=time;
				this.tagNameIn=tagName;
				this.currentPageIn=1
				this.dialogVisible=true;
							//console.log(time);
							//console.log(tagName);
							if(this.timeIn!=null){
						   this.axios({
						   	method:"get",
						   	url:`/abDataOp/order?pageNum=${this.currentPageIn}&startTime=${time}&tagName=${tagName}`
						    }).then(r=>{
									console.log(r.data);
								     this.detailsList=r.data.list;
									this.totalIn=r.data.total;	
									
						   });
						   }
						   else{
							   this.detailsList=[];
							   this.totalIn=0;	
						   }
			},
			
			//弹窗表处理告警级别
			getAlarmClass(item){
						   if(item.alarm_class==1){
								return('一级告警');
								}
							else if(item.alarm_class==2)
								return('二级告警');
						   
			},
			//弹窗表处理告警类型
			getType(item){
						   if(item.type==1){
								return('普通类');
								}
							else if(item.type==2)
								return('阈值类');
						   
			},
			//弹窗分页
			handleCurrentChangeIn(val) {
				this.currentPageIn = val
				//this.dialogVisible=true;
							//console.log(time);
							//console.log(tagName);
							//console.log(this.timeIn);
							
						   this.axios({
						   	method:"get",
						   	url:`/abDataOp/order?pageNum=${this.currentPageIn}&startTime=${this.timeIn}&tagName=${this.tagNameIn}`
						    }).then(r=>{
									console.log(r.data);
									if(r.data.list.length!=0){
								     this.detailsList=r.data.list;
									this.totalIn=r.data.total;	
									}
									else{
										this.detailsList=[]
										this.totalIn=0	
									}
						   });
			    },
				
			//中断监测点
			interrupt(){
				this.dialogVisibleInterrupt=true;
				this.currentPageInterrupt=1
				
				this.axios.post('/dataOp/getInteruptedByPage',{
					pageNum:this.currentPageInterrupt,
					pageSize:this.pageSizeInterrupt,
					filterMap:{
						status:2
					}
					}).then(r=>{
						console.log(r.data);
					this.interruptList=r.data.data.list;
					this.totalInterrupt=r.data.data.total;
				});
				
			},
			
			//中断分页
			handleCurrentChangeInterrupt(val) {
				this.currentPageInterrupt = val
				this.axios.post('/dataOp/getInteruptedByPage',{
						pageNum:this.currentPageInterrupt,
						pageSize:this.pageSizeInterrupt,
						filterMap:{
							status:2
						}
					}).then(r=>{
						this.interruptList=r.data.data.list;
						this.totalInterrupt=r.data.data.total;
					}
					);
			    },
	
		}
	}
</script>

<style lang="less" scoped>
	.select{
		width:65%;
		height:80%;
	}
	.label{
		font-size: 14px;
	}
	

</style>
